<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/vHead :: head">
</head>
<body>
<div id="wrapper" style="padding-left: 50px;">
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-10">
                <h1 class="page-header">服务端监测上报数据</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">&nbsp;</div>
        <div id="errMsgDiv"></div>
        <div class="row">
            <form class="form-horizontal">
                <div class="form-group">
                    <label id="alertMsg" class="col-sm-2 control-label"></label>
                </div>
            </form>
        </div>
        <div id="data" class="row">

        </div>
    </div>

    <div id="dispatch-wrapper">
        <div class="row">
            <div class="col-lg-10">
                <h1 class="page-header">模拟下发数据</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <form>
            <div class="form-group">
                <label for="deviceId">DeviceId</label>
                <input type="text" class="form-control" id="deviceId" value="AABBCCDDEEFF112233445566"
                       style="width: 83%;"/>
            </div>

            <div class="form-group">
                <label for="rgb">颜色</label>
                <input type="text" class="form-control" id="rgb" style="width: 83%;"/>
            </div>

            <div class="form-group">
                <label for="versionId">版本号</label>
                <select id="versionId" class="form-control" style="width: 83%;">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">4</option>
                    <option value="7">7</option>
                </select>
            </div>
            <div class="form-group input-group">
                <label for="exeTime">命令执行时间</label>
                <input id="exeTime" type='text' class="form-control date" style="width: 83%;"/>
            </div>

            <!--<div class="form-group">-->
            <!--<label for="command">命令</label>-->
            <!--<select id="command" class="form-control" style="width: 83%;">-->
            <!--<option value="on">开灯</option>-->
            <!--<option value="off">关灯</option>-->
            <!--</select>-->
            <!--</div>-->
            <button id="openEvent" type="button" class="btn btn-success">开灯</button>

            <button id="closeEvent" type="button" class="btn btn-danger">关灯</button>
            <div id="respMsg"></div>
        </form>
    </div>
</div>
<!-- /#wrapper -->

<!-- js lib -->
<div th:replace="common/vJsLib :: jsLib"></div>
<script type="text/javascript">
    /*<![CDATA[*/
    contextPath = /*[[@{/}]]*/ '';
    /*]]>*/
    var socket = null;
    $(function () {
        //初始化颜色选择器
        $('#rgb').colorpicker();

        $('#exeTime').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss',
            locale: moment.locale('zh-cn'),
            defaultDate: new Date()
        });

        $("#openEvent").bind("click", function () {
            $("#respMsg").empty();
            var deviceId = $("#deviceId").val();
            var versionId = $("#versionId").val();
            var exeTime = $("#exeTime").val();
            var event = "on";
            var color = $("#rgb").val();
            console.log(color);
            var params = {
                "deviceId": deviceId,
                "version": parseInt(versionId),
                "eventType": event,
                "exeTime": new Date(exeTime).getTime(),
                "value":color,
            };
            $.ajax({
                type: "POST",
                url: contextPath + "/ai/event/push",
                contentType: "application/json",
                data: JSON.stringify(params),
                dataType: "json",
                success: function (data) {
                    if (data.status == 1) {
                        var msg = "发送成功";
                        $("#respMsg").attr("style", "color:green;").append(msg);
                    } else {
                        var msg = "发送失败,服务器内部错误";
                        $("#respMsg").attr("style", "color:red;").append(msg);
                    }
                }
            });
        });

        $("#closeEvent").bind("click", function () {
            $("#respMsg").empty();
            var deviceId = $("#deviceId").val();
            var versionId = $("#versionId").val();
            var exeTime = $("#exeTime").val();
            var event = "off";
            var params = {
                "deviceId": deviceId,
                "version": parseInt(versionId),
                "eventType": event,
                "exeTime": new Date(exeTime).getTime()
            };
            $.ajax({
                type: "POST",
                url: contextPath + "/ai/event/push",
                contentType: "application/json",
                data: JSON.stringify(params),
                dataType: "json",
                success: function (data) {
                    if (data.status == 1) {
                        var msg = "发送成功";
                        $("#respMsg").attr("style", "color:green;").append(msg);
                    } else {
                        var msg = "发送失败,服务器内部错误";
                        $("#respMsg").attr("style", "color:red;").append(msg);
                    }
                }
            });
        });

        if (typeof(WebSocket) == "undefined") {
            $("#alertMsg").html("您的浏览器不支持WebSocket");
        } else {
            $("#alertMsg").html("您的浏览器支持WebSocket,下面开始进行websocket初始化....");
            socket = new WebSocket("ws://" + window.location.host + "/websocket");
            //打开事件
            socket.onopen = function () {

                $("#alertMsg").html("正在建立连接，请稍后...");
            };
            //获得消息事件
            socket.onmessage = function (msg) {
                var data = eval('(' + msg.data + ')');
                if (data.type == 'sys') {
                    $("#alertMsg").html(data.data);
                } else {
                    //数据，直接展示
                    $("#data").html(data.data);
                }
            };
            //关闭事件
            socket.onclose = function () {
                console.log("Socket已关闭");
            };
            //发生了错误事件
            socket.onerror = function () {
                alert("Socket发生了错误");
            }
        }

    });

    $(window).on('beforeunload ', function () {
        if (socket != null) {
            socket.close();
            socket = null;
        }
    });
</script>
</body>
</html>
